<template>
  <div class="shop">
    <el-button-group>
      <el-button @click="changeStatus(0)">全部</el-button>
      <el-button @click="changeStatus(7)">近7天</el-button>
      <el-button @click="changeStatus(15)">近15天</el-button>
      <el-button @click="changeStatus(30)">近30天</el-button>
    </el-button-group>

    <!--搜索-->
    <div class="search">
      <el-input class="input" v-model="form.keyword" placeholder="输入订单编号搜索" clearable></el-input>
      <el-button type="primary" @click="searchShop">搜索</el-button>
    </div>
    <el-table :data="tableData" style="width:100%" max-height="680" class="shop_table_list" :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="订单号" prop="orderNo" width='140'></el-table-column>
      <el-table-column label="时间" prop="createdAt" width='140'>
        <template slot-scope="scope">
          <p>{{ parseTime(scope.row.createdAt) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="类型|支付单号" width='240'>
        <template slot-scope="scope">
          <p>{{ scope.row.payMethodAndSn }}</p>
          <!-- <p v-if="scope.row.transaction_type == 5">拼团退还 {{scope.row.order_no}}</p> -->

        </template>
      </el-table-column>
      <el-table-column label="类型|收支流水号">
        <template slot-scope="scope">
          <p>{{ scope.row.orderTypeAndNo }}</p>
          <!-- <p v-if='scope.row.order_type == 5'>现金券</p>
          <p v-if='scope.row.order_type == 10'>拼团</p>
          <p v-if='scope.row.order_type == 15'>会员专享商品</p>
          <p v-if='scope.row.order_type == 20'>优惠买单</p>
          <p v-if='scope.row.order_type == 25'>普通商品</p>
          <p v-if='scope.row.order_type == 30'>会员充值</p> -->
        </template>
      </el-table-column>
      <el-table-column label="所属小店" prop='sellerName' width='140'>

      </el-table-column>
      <el-table-column label="实际金额" prop='actualAmount' width='140'>
        <template slot-scope="scope">
          <p v-if='scope.row.actualAmount'> ¥ {{ scope.row.actualAmount }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="小店佣金" prop='shopCommission' width='140'>
        <template slot-scope="scope">
          <p v-if='scope.row.shopCommission'> ¥ {{ scope.row.shopCommission }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="平台佣金" prop='platformCommission' width='140'>
        <template slot-scope="scope">
          <p v-if='scope.row.platformCommission'> ¥ {{ scope.row.platformCommission }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="合伙人佣金" prop='partnerCommission' width='140'>
        <template slot-scope="scope">
          <p v-if='scope.row.partnerCommission'> ¥ {{ scope.row.partnerCommission }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="费率金额" prop='rateAmount' width='140'>
        <template slot-scope="scope">
          <p v-if='scope.row.rateAmount'> ¥ {{ scope.row.rateAmount }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>


      <!-- <el-table-column label="流水（元）">
        <template slot-scope="scope">
          <p v-if='scope.row.actualAmount > 0'> + ¥ {{ scope.row.actualAmount }}</p>
          <p v-if='scope.row.actualAmount < 0'> - ¥ {{ scope.row.actualAmount }}</p>
          <p v-if='scope.row.actualAmount == 0'> ¥ {{ scope.row.actualAmount }}</p>
          <p v-show="!scope.row.actualAmount">---</p>
        </template>
      </el-table-column>
      <el-table-column label="收益（元）" prop='commission_value'>
        <template slot-scope="scope">
          <p v-if='scope.row.shopCommission'> ¥ {{ scope.row.shopCommission }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column> -->
      <el-table-column label="状态">
        <template slot-scope="scope">
          <p>{{ scope.row.settleStatusText }}</p>
          <!-- <p v-if='scope.row.status == 5'>已结算</p>
          <p v-if='scope.row.status == 10'>已取消</p> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" fixed='right'>
        <template slot-scope="scope">
          <el-button size='mini' type="danager" @click="watchRecordDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="pageChange" :current-page="form.page"
          :page-size="form.size" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-col>

    <jdialog title="交易信息详情" :visible.sync="isShowRecordDetail" width="800px">
      <record-detail :visible="isShowRecordDetail" :currentId="currentId" @close="isShowRecordDetail = false"
        @func="cancelShowRecordDetail"></record-detail>
    </jdialog>

  </div>
</template>

<script>
import recordDetail from './record_detail'
import { transactionDetail, transactionDetailExport } from "@/api/finance"
// import {shopTransactionList} from '@/api/finance'
export default {
  components: {
    recordDetail
  },
  name: 'record',
  data() {

    return {
      form: {
        keyword: undefined,
        // day: '',
        pageNum: 1,
        pageSize: 20,
        startTime: undefined,
        endTime: undefined
      },
      total: 0,
      isShowRecordDetail: false,
      currentId: '',
      tableData: []
    };
  },
  mounted() {
    this.getshopTransactionListData()
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    searchShop() {
      //根据关键词搜索
      this.getshopTransactionListData();
    },
    changeStatus(type) {
      if (type === 0) {

        this.form.startTime = undefined;
        this.form.endTime = undefined;
      } else {
        // this.form.day = type;
        const now = new Date();
        const end = new Date(now);
        const start = new Date(now);
        start.setDate(start.getDate() - type);
        this.form.startTime = start.toISOString().split('T')[0];
        this.form.endTime = end.toISOString().split('T')[0];
        this.form.startTime = this.parseTime(this.form.startTime)
        this.form.endTime = this.parseTime(this.form.endTime)
      }
      // console.log(this.form)
      this.getshopTransactionListData();
    },
    watchRecordDetail(id) {
      this.currentId = id;
      this.isShowRecordDetail = true;
    },
    cancelShowRecordDetail() {
      this.isShowRecordDetail = false;
    },
    handleSizeChange(val) {
      this.form.size = val;
      this.pageChange(1);
    },
    pageChange(page) {
      this.form.page = page;
      this.getshopTransactionListData()
    },
    async getshopTransactionListData() {
      let res = await transactionDetail(this.form)
      console.log(res)
      if (res.code === 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .pagination {
    float: right;
  }

  .shop_table_list {
    margin-top: 20px;
  }

  .record_baseInfo {
    border-top: 1px solid red;

  }

  .search {
    float: right;

    .input {
      width: 200px;
    }

    .addBtn {
      position: absolute;
      right: 50px;
      top: 20px;
    }

  }
}
</style>
